<template>
   <div class="home" v-loading="loading" element-loading-text="拼命加载中..." element-loading-background="#fff">
      <el-carousel :interval="5000" arrow="never" height="145px">
         <el-carousel-item v-for="(banner, index) in banners" :key="index">
            <a :href="banner.extra.tourl">
					<img :src="banner.imgurl" :title="banner.title" class="max-img">
				</a>
         </el-carousel-item>
      </el-carousel>
      <el-table :data="songList" :show-header= false>
         <el-table-column prop="filename" label="" ></el-table-column>
         <el-table-column width="60"> 
            <i class="el-icon-download"></i>   
         </el-table-column>
    </el-table>
   </div>
</template>

<script>
export default {
   data () {
     return {
         banners: [],
         songList: [],
         loading : true
     }
   },
   created(){
      this.getSongs();
   },
   methods: {
      getSongs(){
         this.$http.get('/proxy/?json=true').then(({data}) => {
            this.banners = data.banner;
            this.songList = data.data;
            this.loading = false;
         }).catch((err) => {
            this.loading = false;
            this.$message.error('网络波动，刷新下试试尼');
            console.log(err);
         })
      }
   }
}
</script>

<style>
 .el-carousel__item h3 {
    text-align: center;
    color: #fff;
    font-size: 30px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item {
    background-color: #99a9bf;
  }
  .el-icon-download{font-size: 26px}
</style>
